<template>
	<view>
		<uni-drawer ref="filter" mode="right">
			<view class="filter">
				<view class="filter-line">
					<view class="filter-title">{{$t('equipment.common.eqType')}}</view>
					<view class="filter-input">
						<input :placeholder="$t('baseCommon.message.pleaseEnter', { title: '' })" v-model="eqTypeName"></input>
					</view>
				</view>
				<view class="filter-line">
					<view class="filter-title">{{$t('equipment.common.assetType')}}</view>
					<view class="filter-input">
						<input :placeholder="$t('baseCommon.message.pleaseEnter', { title: '' })" v-model="assetTypeName"></input>
					</view>
				</view>
				<view class="filter-line">
					<view class="filter-title">{{$t('common.field.keyword')}}</view>
					<view class="filter-input">
						<input :placeholder="$t('common.field.enterKeywords')" v-model="keyword"></input>
					</view>
				</view>
				<view class="filter-btn">
					<button type="primary" @click="doQuery">{{$t('baseCommon.buttons.confirm')}}</button>
					<button type="default" @click="doClear">{{$t('baseCommon.buttons.reset')}}</button>
				</view>
			</view>
		</uni-drawer>

		<mescroll-body bottom="60px" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<radio-group @change="radioChange">
				<label class="select-list" v-for="item in list" :key="item.id">
					<view class="check-cell">
						<radio :value="item.id" :checked="item.id === checkedItem.id" class="check-size" />
					</view>
					<view class="select-content">
						<view class="select-detail"><strong>{{$t('defect.defInfo.oldFaultCode')}}：</strong>{{ item.faultCode }}</view>
						<view class="select-detail"><strong>故障描述：</strong>{{ item.faultDescription }}</view>
					</view>
				</label>
			</radio-group>
		</mescroll-body>

		<view class="select-btn">
			<button type="primary" @click="doSure">{{$t('baseCommon.buttons.confirm')}}</button>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"
	import { getPhenomenonList } from '@/api/business/workorder.js'

	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				eqTypeName: '',
				assetTypeName: '',
				keyword: '',
				list: [],
				checkedItem: {},
				eqTypeId: '',
				assetTypeId: '',
				phenomenon: ''
			}
		},
		onLoad(option) {
			this.eqTypeId = option.eqTypeId
			this.assetTypeId = option.assetTypeId
			this.phenomenon = option.phenomenon
		},
		methods: {
			downCallback() {
				this.mescroll.resetUpScroll()
			},
			upCallback(page) {
				let param = {
					eqTypeName: this.eqTypeName,
					assetTypeName: this.assetTypeName,
					keyword: this.keyword,
					eqTypeId: this.eqTypeId,
					assetTypeId: this.assetTypeId,
					current: page.num,
					size: page.size
				}
				getPhenomenonList(param).then(res => {
					let curPageData = res.data.records
					let curPageLen = curPageData.length
					let totalSize = res.data.total
					//设置列表数据
					if(page.num == 1) this.list = [] //如果是第一页需手动置空列表
					this.list = this.list.concat(curPageData) //追加新数据
					
					this.mescroll.endBySize(curPageLen, totalSize)
				})
				
				// 数据反显
				this.checkedItem.id = this.phenomenon
			},
			doQuery() {
				this.$refs.filter.close()
				this.mescroll.resetUpScroll()
			},
			doClear() {
				this.eqTypeName = ""
				this.assetTypeName = ""
				this.keyword = ""
			},
			radioChange(e) {
				for (let i = 0; i < this.list.length; i++) {
					if (this.list[i].id === e.detail.value) {
						this.checkedItem = this.list[i];
						break;
					}
				}
			},
			doSure() {
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.emit('selectPhenomenon', this.checkedItem);
				uni.navigateBack();
			}
		},
		onNavigationBarButtonTap(e) {
			this.$refs.filter.open()
		}
	}
</script>

<style lang="scss">
	@import '@/static/style/common-list.scss';
</style>
